<!DOCTYPE html>
<html>
<head>
<!-- 标题内容信息 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分类</title>
<meta 
    name="viewport" 
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome Icons 显示标签图片-->
<link href="../../plugins/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../dist/css/them.css" rel="stylesheet" type="text/css" />
<!-- 引入共通包 *必有-->
<script type="text/javascript" src="../../dist/util/include.js"></script>

<script src="../../plugins/My97DatePicker/WdatePicker.js"></script>
    <style>
        .info-box-number{display: inline-block !important;    margin-left: 20px;    background: rgba(255,255,255,0.7);
            border-radius: 20px;
            padding: 0 5px;
            color: #374850;}
        .bg-aqua{background-color:#62b8e9 !important}

        .info-box .progress{height:5px;            margin-bottom: 10px;}
        .progress-description, .info-box-text{margin-bottom: 10px;}
        .bg-green{background-color: #648A9C !important;}
        .bg-yellow{background-color:rgb(202, 184, 97) !important;}
        .bg-aqua-01{background-color:#ed8175 !important}
        .bg-aqua-02{background-color:#78D3DC !important}
        .bg-aqua-03{background-color:#9292AB !important}
        .info-box-icon{    padding-top: 15px;
            font-size: 18px;
            line-height: 30px;}
    </style>
<!-- 脚本卸载上面head里 -->
<script type="text/javascript">
    $(function(){
        $("#reservation").val(new Date(new Date()-24*60*60*1000).format('yyyy-MM-dd'));

        init();

        $("#bankdiv").click(function() {
            location.href = "organMonitor.html";
        });

        $("#machinediv").click(function() {
            location.href = "MachineMonitor.html";
        });
          
        $("#scanDBdiv").click(function() {
            location.href = "ScanDBMonitor.html";
        });

        $("#zipdiv").click(function() {
            location.href = "ZipMonitor.html";
        });

        $("#uploaddiv").click(function() {
            location.href = "UploadMonitor.html";
        });

        $("#unzipdiv").click(function() {
            location.href = "UnzipMonitor.html";
        });
        
        $("#search").click(function(){
            init();
        })
    });

    function init () {
        $("#bankScanPer").text("");
        $("#bankSanBar").width("");
        $("#bankScanDate").text("");
        var params = new Object();
        params['date'] = $("#reservation").val().replace(/-/g,'');
        $.post(ctx+"/monitor/statistics/bank",
        		params,
        		function(res){
		        	var data = $.parseJSON(res);
		            if(data[Cons.RESULT] != Cons.SUCCESS){
		                    layer.msg(data[Cons.RESULT_MSG], {
		                        icon : 2
		                    });
		                    return;
		            }
		            data = data[Cons.RESULT_DATA];
		            $("#bankScan").text(data.all + ":" + data.warn);
		            var persent = parseInt((data.warn / data.all)*100) + "%";
		            $("#bankScanPer").text(persent);
		            $("#bankSanBar").width(persent);
		            $("#bankScanDate").text($("#reservation").val());
		        }
        );

        $("#machScanPer").text("");
        $("#machSanBar").width("");
        $("#machScanDate").text("");
        $.post(ctx+"/monitor/statistics/mach",
        		params,
        		function(res){
		        	var data = $.parseJSON(res);
		            if(data[Cons.RESULT] != Cons.SUCCESS){
		                layer.msg(data[Cons.RESULT_MSG], {
		                    icon : 2
		                });
		                return;
		            }
		            data = data[Cons.RESULT_DATA];
		            $("#machScan").text(data.all + ":" + data.warn);
		            var persent = parseInt((data.warn / data.all)*100) + "%";
		            $("#machScanPer").text(persent);
		            $("#machSanBar").width(persent);
		            $("#machScanDate").text($("#reservation").val());
		        }
        );

        $("#scanPer").text("");
        $("#scanBar").width("");
        $("#scanDate").text("");
        $.post(ctx+"/monitor/statistics/scan",
        		params,
        		function(res){
		        	var data = $.parseJSON(res);
		            if(data[Cons.RESULT] != Cons.SUCCESS){
		                layer.msg(data[Cons.RESULT_MSG], {
		                    icon : 2
		                });
		                return;
		            }
		            data = data[Cons.RESULT_DATA];
		            if (data == null) {
		                $("#scan").text(0 + ":" + 0);
		                $("#scanQty").text(0);
		                $("#analysisQty").text(0);
		                $("#scanPer").text(0);
		                $("#scanBar").width(0);
		                $("#scanDate").text($("#reservation").val());
		                return;
		            }
		            $("#scan").text(data.all + ":" + data.warn);
		            var persent = parseInt((data.warn / data.all)*100) + "%";
		            $("#scanQty").text(data.scanQty);
		            $("#analysisQty").text(data.analysisQty);
		            $("#scanPer").text(persent);
		            $("#scanBar").width(persent);
		            $("#scanDate").text($("#reservation").val());
		        }
        );

        $("#zipPer").text("");
        $("#zipBar").width("");
        $("#zipDate").text("");
        $.post(ctx + "/monitor/statistics/zip",
        		params,
        		function(res){
		        	var data = $.parseJSON(res);
		            if(data[Cons.RESULT] != Cons.SUCCESS){
		                    layer.msg(data[Cons.RESULT_MSG], {
		                        icon : 2
		                    });
		                    return;
		            }
		            data = data[Cons.RESULT_DATA];
		            if (data == null) {
		                $("#zip").text(0 + ":" + 0);
		                $("#zipQty").text(0);
		                $("#zipPer").text(0);
		                $("#zipBar").width(0);
		                $("#zipDate").text($("#reservation").val());
		                return;
		            }
		            $("#zip").text(data.all + ":" + data.warn);
		            var persent = parseInt((data.warn / data.all) * 100) + "%";
		            $("#zipQty").text(data.zipQty);
		            $("#zipPer").text(persent);
		            $("#zipBar").width(persent);
		            $("#zipDate").text($("#reservation").val());
		        }
        );

        $("#uploadPer").text("");
        $("#uploadBar").width("");
        $("#uploadDate").text("");
        $.post(ctx+"/monitor/statistics/upload",
        		params,
        		function(res){
		        	var data = $.parseJSON(res);
		            if(data[Cons.RESULT] != Cons.SUCCESS){
		                    layer.msg(data[Cons.RESULT_MSG], {
		                        icon : 2
		                    });
		                    return;
		            }
		            data = data[Cons.RESULT_DATA];
		            if (data == null) {
		                $("#upload").text(0 + ":" + 0);
		                $("#uploadQty").text(0);
		                $("#uploadPer").text(0);
		                $("#uploadBar").width(0);
		                $("#uploadDate").text($("#reservation").val());
		
		                return;
		            }
		            $("#upload").text(data.all + ":" + data.warn);
		            var persent = parseInt((data.warn / data.all)*100) + "%";
		            $("#uploadQty").text(data.uploadQty);
		            $("#uploadPer").text(persent);
		            $("#uploadBar").width(persent);
		            $("#uploadDate").text($("#reservation").val());
		        }
        );

        $("#unzipPer").text("");
        $("#unzipDate").text("");
        $.post(ctx+"/monitor/statistics/unzip",
        		params,
        		function(res){
		        	var data = $.parseJSON(res);
		            if(data[Cons.RESULT] != Cons.SUCCESS){
		                    layer.msg(data[Cons.RESULT_MSG], {
		                        icon : 2
		                    });
		                    return;
		            }
		            data = data[Cons.RESULT_DATA];
		            $("#unzip").text(data.warn);
		            $("#unzipQty").text(data.unzipQty);
		            $("#unzipPer").text(data.warn);
		            $("#unzipDate").text($("#reservation").val());
		        }
        );
    }
</script>
</head>
<body class="skin-blue sidebar-mini">
    <div class="wrapper">
        <!-- Content Wrapper. Contains page content -->
		    <div class="content-wrapper" style="margin-left: 0px;">
            <!-- Content Header (Page header) -->
            <section class="content-header bg-gray">
				        <h1>垃圾分类 绿色生活</h1>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="row">

                    <br>
                    <br>
                    <br>
                    <div class="col-md-12">
              		          <!-- Info Boxes Style 2 -->
              		          <div class="info-box bg-aqua" style="cursor:pointer" id = "bankdiv">
                		            <span class="info-box-icon">
                                     <i class="fa fa-bank fa-lg"></i><br/>
                			            可回收物
                		            </span>
                		            <div class="info-box-content">
                  			            <span class="info-box-text">
                                            主要包括废纸、塑料、玻璃、金属和布料五大类
                                        </span>
                                    </div>
                            </div><!-- /.info-box -->
                    </div>
                </div>
            </section><!-- /.content -->
        </div><!-- /.content-wrapper -->
    </div><!-- /.wrapper -->
</body>
</html>